<template>
  <lay-card>
    <lay-row space="10">
      <lay-col md="18">
        <lay-radio
            v-if="operate !== 'copy'"
            v-model="nodeType"
            name="action"
            :value="'scene_dir'"
            label="目录"
            :disabled="disabled"
        ></lay-radio>
        <lay-radio
          v-model="nodeType"
          name="action"
          :value="'scene_id'"
          label="场景"
          :disabled="disabled"
          @change="exchangeType"
        ></lay-radio>
        <lay-radio
          v-model="nodeType"
          name="action"
          :value="'scene_group'"
          label="场景组"
          :disabled="disabled"
          @change="exchangeType"
        ></lay-radio>
      </lay-col>
    </lay-row>
    <lay-row space="10">
      <lay-col md="18" v-if="operate === 'copy'">
        <lay-dropdown updateAtScroll ref="manualRefLeft" :clickOutsideToClose="false">
          <lay-input v-model="targetNodeName" placeholder="请选中目标场景">
            <template #prepend>场景：</template>
          </lay-input>
          <template #content>
            <div style="width: 500px">
              <SceneVirtualTree
                :scrollHeight="'500px'"
                :showCheckbox="true"
                :checkedType="nodeType"
                @insertTables="insertTables"
                @cancelCheck="cancelCheckLeft"
              ></SceneVirtualTree>
            </div>
          </template>
        </lay-dropdown>
      </lay-col>
      <lay-col md="18">
        <lay-input v-model="nodeName" placeholder="请输入名称">
          <template #prepend>名称：</template>
        </lay-input>
      </lay-col>
      <lay-col md="4">
        <lay-button type="normal" @click="submitName">
          {{ buttonName }}
        </lay-button>
      </lay-col>
    </lay-row>
  </lay-card>
</template>

<script lang="ts">
export default {
  name: "AddSceneType"
}
</script>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
import {addSceneApi, addSceneOfCopyApi, updateSceneApi} from "../../../api/module/scene";
import {notify, openMsg} from "../../../untils/tip";
import SceneVirtualTree from "./SceneVirtualTree.vue";

const {operate, currentNode, updateNode} = defineProps({
  operate: {type: String, default: ref('add')},
  currentNode: {type: Object, default: reactive({id: '', type: 'scene_dir', title: '', children: []})},
  updateNode: {type: Function}
});

const emit = defineEmits(['updateNode']);

const updateNodeMethod = ref();

onBeforeMount(() => {
  updateNodeMethod.value = updateNode;
  if(operate === 'add'){
    nodeName.value = '';
    nodeType.value = 'scene_dir';
    disabled.value = false;
    buttonName.value = '新增'
  }else if(operate === 'copy'){
    buttonName.value = '新增';
    nodeName.value = '';
    nodeType.value = 'scene_id';
  }else {
    nodeName.value = currentNode?.title;
    nodeType.value = currentNode?.type;
    disabled.value = true;
    buttonName.value = '更新';
  }
});

const nodeName = ref('');
const nodeType = ref('scene_dir');
const disabled = ref(false);
const buttonName = ref('新增');
const targetNodeId = ref();
const targetNodeName = ref();

const exchangeType = () => {
  console.log('exchangeType', operate)
  if(operate === 'copy'){
    cancelCheckLeft();
  }
}

const submitName = async () => {
  let params: any = ref({parent_id: '', id: '', type: nodeType, title: nodeName.value, name: nodeName.value,
    children: [], spread: false, checked: false});
  if(operate === 'add'){
    params.value.parent_id = currentNode?.id;
    let {result, status, message} = await addSceneApi(params.value)
    if(status === 'success'){
      params.value.id = result.id;
      emit('updateNode', params.value);
    }
    openMsg(status, message)
  }else if(operate === 'copy'){
    params.value.parent_id = currentNode?.id;
    params.value.name = nodeName.value;
    let paramsNew: any = reactive({id: targetNodeId.value, name: nodeName.value, path_id: currentNode?.id });
    let {result, status, message} = await addSceneOfCopyApi(paramsNew)
    if(status === 'success'){
      params.value.id = result.id;
      emit('updateNode', params.value);
    }else {
      notify('failed', message)
    }
  }else {
    params.value.id = currentNode?.id;
    params.value.target = 'title';
    const sceneDict = reactive({
      id: currentNode?.id,
      target: 'title',
      type: nodeType,
      name: nodeName.value
    });
    let results  = await updateSceneApi(sceneDict);
    console.log('updateSceneApi : ', results)
    if(results.status === 'success'){
      emit('updateNode', params.value);
    }
    openMsg(results.status, results.message);
  }
};


// 插入或更新 依赖表/目标表 或其下的字段
const insertTables = async (data: any) => {
  targetNodeId.value = data[0].id;
  targetNodeName.value = data[0].name;
  console.log('targetNode:', targetNodeName.value)
  nodeName.value = targetNodeName.value + '_copy';
  cancelCheckLeft();
};

const manualRefLeft = ref();

const cancelCheckLeft = () => {
  manualRefLeft.value.hide()
};
</script>

<style scoped>

</style>